<template>
  <el-drawer v-model="dialogVisible" title="历史记录" direction="rtl" size="60%">
    <ContentWrap>
      <!-- 详情弹窗：查看 -->
      <ChatList :chatHistoryList="chatHistoryList" />
    </ContentWrap>

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
      small
    />
  </el-drawer>
</template>

<script lang="ts" setup>
import * as SessionRecordApi from '@/api/blind/sessionRecord/index.ts'
import ChatList from '@/views/blind/memberMessage/components/ChatList.vue'
import TUIChatEngine, { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine'

const dialogVisible = ref(false) // 弹窗的是否展示
const chatHistoryList = ref([] as SessionRecordApi.SessionRecordVO[])

const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  recordId: ''
})

/** 查询列表 */
const getList = async () => {
  chatHistoryList.value = []
  const data = await SessionRecordApi.getMessagePage(queryParams)
  chatHistoryList.value = data.list
  total.value = data.total
}

// 监听会话
TUIStore.watch(StoreName.CUSTOM, {
  CustomconversationID: (id: string) => {
    queryParams.recordId = id
  }
})

/** 打开弹窗 */
const open = async (id: string) => {
  dialogVisible.value = true
  // 修改时，设置数据
  // queryParams.recordId = id
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹
</script>
